Empathy Phase: Understanding User Needs

Before beginning the redesign, I focused on deeply understanding the needs of two key user groups: donors and beneficiary. For donors, the goal was to ensure that the website instilled trust and made donating as intuitive as possible. For the beneficiaries, it was about enabling them to easily locate resources.

To achieve this, I conducted a heuristic evaluation of the existing site and interviewed colleagues about pain points. I also reviewed competitor websites to identify patterns and best practices. A critical insight from this phase was that donors respond more positively over time to messages of empowerment and impact rather than guilt-driven narratives. Guilt-driven narratives, besides their inherent unethicality, only encouraged one time donations in the majority of users. In addition, I confirmed that outdated content and poor mobile usability were major deterrents for potential donors.

Define Phase: Framing the Problem

I aimed to answer the question: How might we create an intuitive, accessible, and empowering online experience that encourages donations and supports the organization’s mission?

From my previous work, I identified these core problems:

• The outdated website design hindered trust and engagement with donors.
• The information hierarchy and lack of information scent made critical details (e.g., how to donate) difficult to find
• The site wasn’t optimized for mobile, despite significant mobile traffic.

Ideation Phase: Exploring Solutions Beyond the Obvious

Rather than jumping into a direct redesign, I took a step back to consider the broader user experience. I explored multiple concepts, focusing on ideas that would emphasize trust and impact while reducing friction in the donor journey.

Based on my findings, I decided to limit header options to avoid cluttering the navigation. I also reframed the website's messaging to celebrate the positive impact of donations, aligning with the organization’s mission and donor values.

I created wireframes and low-fidelity prototypes, which I shared with staff and test users to gather feedback. These iterative sessions helped me refine solutions, such as emphasizing key calls to action and simplifying the mobile interface to reduce cognitive load.

Prototype and Test: Validating Solutions

Using the feedback gathered during ideation, I developed a high-fidelity prototype using Figma and conducted further internal user testing. Then, I created and published the website using in WordPress. After installing Hotjar to track user metrics, I used A/B testing to compare different layouts and styles, focusing on metrics such as bounce rate and click-through rate.

One critical test involved redesigning the donation page for mobile users, as many were scrolling up and down searching for information. The streamlined version reduced the bounce rate by 11%. Another test addressed confusion around navigation, where users mistook headers for buttons. Adjustments to the header style clarified the interaction, reducing misclicks.

Deliver Phase: Implementing and Measuring Success

The final solution included a responsive website with a clean, user-centered design. I implemented a design system to ensure consistency and scalability for future updates. Post-launch, I monitored user behavior with Hotjar, making iterative improvements based on data-driven insights.

The results speak to the success of this approach: a 24% increase in donations, 32% higher traffic, and a 60% reduction in support emails. These outcomes demonstrate how thoughtful, research-driven design can directly impact both user experience and organizational goals.

To ensure the website effectively supported the organization’s mission, I began by studying established design systems like M3 and Shopify. While the scope of our site was smaller, these systems inspired scalable, user-focused principles that guided my decisions.

The website’s primary goal was to encourage donations, so I focused on creating a welcoming and accessible experience. My research included a review of over 12 partner organizations to understand visual and content strategies that resonated with similar audiences. Key design decisions included

• Visual Identity: Used bright, warm colors and rounded containers to create an approachable and optimistic aesthetic.
• Accessibility: Ensured high text contrast (7:1 minimum), alt text for all images, and a reading level appropriate for a broad audience.
• User Celebration: Targeted donors as the primary audience with positive, empowering language over guilt-driven messaging.

Additionally, I prioritized responsive design, ensuring the layout worked seamlessly across desktop, tablet, and mobile devices.

Although creating a formal design system might seem ambitious for a small nonprofit, this project was an invaluable opportunity to deepen my expertise. By studying industry-leading systems and adapting them to our needs, I not only improved the website’s usability and consistency but also grew significantly as a designer.